<template>
    <div class="folder" :class="{'show' : show , 'active' : activeId == folderValue.id , 'root' : folderValue.isRoot}" @mouseover.stop="fileMouseover($event)" @mouseout.stop="fileMouseout()">
        <div class="folder-name" :class="{'isRoot' : folderValue.isRoot}" @mousedown="keyDown($event)" @mouseup="keyUp($event)">
            <div class="icon">
                <i class="el-icon-arrow-right"></i>
            </div>
            <el-popover placement="right" trigger="hover">
                <div class="folderCount" style="width: 200px;" v-if="!folderValue.isRoot">
                    标题 ：{{folderValue.title}}
                </div>
                <div class="folderCount">
                    <i class="el-icon-folder"></i>
                    {{folderValue.folderList.length}}
                    &nbsp;&nbsp;
                    <i class="el-icon-star-on"></i>
                    {{folderValue.apiList.length}}
                </div>
                <div class="folderCount" style="width: 200px;" v-if="!folderValue.isRoot">
                    备注 ：{{folderValue.description}}
                </div>
                <div class="folder-title" slot="reference">{{folderValue.title}}</div>
            </el-popover>

            <!-- <div class="folderSetting" v-if="!folderValue.isRoot && !folderMoveModule && !apiMoveModule">
                <div class="folderSettingItem" @mousedown.stop="newFolderEvent" @mouseup.stop="settingDown">
                    <i class="el-icon-folder-add"></i>
                </div>
                <div class="folderSettingItem" @mousedown.stop="openDetail" @mouseup.stop="settingDown">
                    <i class="el-icon-edit-outline"></i>
                </div>
                <div class="folderSettingItem" @mousedown.stop="deleteFolder" @mouseup.stop="settingDown">
                    <i class="el-icon-delete"></i>
                </div>
            </div> -->
            <div class="folderSetting isRoot" v-if="folderValue.isRoot && !folderMoveModule && !apiMoveModule">
                <div class="folderSettingItem" @mousedown.stop="newFolderEvent" @mouseup.stop="settingDown">
                    <i class="el-icon-folder-add"></i>
                </div>
                <div class="folderSettingItem" @mousedown.stop="hiddenAllFolder" @mouseup.stop="settingDown">
                    <i class="el-icon-remove-outline"></i>
                </div>
                <div class="folderSettingItem" @mousedown.stop="refresh" @mouseup.stop="settingDown">
                    <i class="el-icon-refresh"></i>
                </div>
            </div>
        </div>
        <div class="moveLineBox" v-if="folderMoveModule">
            <div class="TopMoveMark" v-if="!folderValue.isRoot" @mouseover.stop="mouseover('TopMoveMark')" @mouseout.stop="mouseout">
                <moveLine v-if="TopMoveMark && moveActiveObject && folderValue.id == moveActiveObject.id"></moveLine>
            </div>
            <div class="intoFolder" :style="{ 'top' : folderValue.isRoot ? '0px' : '25%', 'height' : folderValue.isRoot ? '100%' : '50%' }" @mouseover.stop="mouseover('intoFolder')" @mouseout.stop="mouseout"></div>
            <div class="BottomMoveMark" v-if="!folderValue.isRoot" @mouseover.stop="mouseover('BottomMoveMark')" @mouseout.stop="mouseout">
                <moveLine v-if="BottomMoveMark && moveActiveObject && folderValue.id == moveActiveObject.id"></moveLine>
            </div>
        </div>
        <el-collapse-transition>
            <div v-show="show" :class="{'folderRoot' :  folderValue.isRoot}" ref="treeScroll">
                <div class="folder-list">
                    <folder v-for="item in folderValue.folderList" :key="item.id" :openParentFolder="openFolder" :folderValue="item"></folder>
                </div>
                <div class="folder-api">
                    <file v-for="item in folderValue.apiList" :key="item.id" :openParentFolder="openFolder" :apiValue="item"></file>
                </div>
                <div class="empty" v-if="!folderValue.folderList.length && !folderValue.apiList.length">(空)</div>
            </div>
        </el-collapse-transition>
    </div>
</template>

<script>
import { mapState } from "vuex";
import file from './file.vue';
import moveLine from "./moveLine"

export default {
    components: {
        file,
        moveLine
    },
    props: ['folderValue', 'openParentFolder'],
    name: 'folder',
    data() {
        return {
            show: false,
            active: false,
            TopMoveMark: false,
            BottomMoveMark: false,
        }
    },
    computed: {
        ...mapState("ApiActive", {
            activeId: state => state.activeId
        }),
        ...mapState("Tree", {
            apiMoveModule: state => state.apiMoveModule,
            moveActiveObject: state => state.moveActiveObject,
            markSetting: state => state.markSetting,
            folderMoveModule: state => state.folderMoveModule,
            closeAllFolder: state => state.closeAllFolder,
        }),
        ...mapState("theme", {
            theme: state => state.theme,
        }),
    },
    watch: {
        closeAllFolder: function (newVal, oldVal) {
            this.show = false;
        },
    },
    mounted() {
        this.init();
    },
    updated() {
        this.init();
    },
    methods: {
        openFolder() {
            if (!this.folderValue.isRoot) {
                this.show = true;
                this.openParentFolder();
            };
        },
        refresh() {
            this.$store.dispatch('Tree/getRenderData');
        },
        hiddenAllFolder() {
            this.$store.dispatch('Tree/closeAllFolder');
        },
        newFolderEvent() {
            this.$store.dispatch('Tree/newFolder', this.folderValue);
        },
        openDetail() {
            this.$store.dispatch('Tree/openFolderDetail', this.folderValue);
        },
        deleteFolder() {
            var confirm = this.$confirm('是否删除文件夹？');
            if (confirm) {
                this.$store.dispatch('Tree/deleteFolder', {
                    folderId: this.folderValue.folderId,
                    parentId: this.folderValue.folderParentId,
                });
            };
        },
        settingDown() { },
        keyDown(event) {
            if (event.button == 0) {
                if (!this.folderValue.isRoot) {
                    let X = event.clientX;
                    let Y = event.clientY;
                    document.onmousemove = (event) => {
                        if (!this.folderMoveModule) {
                            if (Math.abs(X - event.clientX) > 10 || Math.abs(Y - event.clientY) > 10) {
                                this.$store.dispatch('Tree/setFolderMoveModule', true);
                                this.show = false;
                            };
                        };
                        this.$store.dispatch('Tree/setMoveObject', {
                            id: this.folderValue.id,
                            x: event.clientX + 30,
                            y: event.clientY + 10,
                            title: this.folderValue.title,
                        });
                    };
                    document.onmouseup = () => {
                        if (this.folderMoveModule) {
                            this.$store.dispatch('Tree/checkMove');
                        };
                        this.$store.dispatch('Tree/setMoveActiveObject', null);
                        this.TopMoveMark = false;
                        this.BottomMoveMark = false;

                        this.$store.dispatch('Tree/setFolderMoveModule', false);
                        this.$store.dispatch('Tree/setMoveObject', {
                            id: null,
                            x: -100,
                            y: -100,
                            title: '',
                        });
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
                };
            } else if (event.button == 2) {

            };
        },
        keyUp(event) {
            if (event.button == 0) {
                this.$nextTick(() => {
                    if (!this.folderValue.isRoot) {
                        if (!this.folderMoveModule && !this.apiMoveModule) {
                            this.show = !this.show;
                            this.$store.dispatch('ApiActive/setActiveId', this.folderValue.id)
                        };
                    };
                });
            } else if (event.button == 2) {
                if (this.folderValue.isRoot) return;
                this.$store.dispatch('ApiActive/setRightActive', {
                    MenuObject: null,
                    MenuObjectActiveType: null,
                    RightMenuStatus: false,
                    RightMenuOption: { X: 0, Y: 0 },
                });
                this.$nextTick(() => {
                    this.$store.dispatch('ApiActive/setRightActive', {
                        MenuObject: this,
                        MenuObjectActiveType: 'Folder',
                        RightMenuStatus: true,
                        RightMenuOption: { X: event.clientX, Y: event.clientY },
                    });
                });
            }
        },
        mouseover(type) {
            if (this.folderMoveModule) {
                this.$store.dispatch('Tree/setMoveActiveObject', this.folderValue);
                if (this.markSetting.id != this.moveActiveObject.id) {
                    setTimeout(() => {
                        let position = this.$el.getBoundingClientRect()
                        if (
                            position.left < this.markSetting.x &&
                            position.left + position.width > this.markSetting.x &&
                            position.top < this.markSetting.y &&
                            position.top + position.height > this.markSetting.y
                        ) {
                            this.show = true;
                        };
                    }, 1500);
                };
                this.TopMoveMark = false;
                this.BottomMoveMark = false;
                if (type != 'intoFolder') {
                    this[type] = true;
                };
                if (this.markSetting.id != this.moveActiveObject.id) {
                    this.$store.dispatch('Tree/setApiMoveType', type);
                } else if (this.markSetting.id == this.moveActiveObject.id) {
                    this.$store.dispatch('Tree/setApiMoveType', null);
                };
            };
        },
        mouseout() {
            if (this.folderMoveModule) {
                this.$store.dispatch('Tree/setMoveActiveObject', null);
            };
        },
        fileMouseover(event) {
            // 鼠标悬停展开文件夹
            if (this.apiMoveModule) {
                setTimeout(() => {
                    let position = this.$el.getBoundingClientRect()
                    if (
                        position.left < this.markSetting.x &&
                        position.left + position.width > this.markSetting.x &&
                        position.top < this.markSetting.y &&
                        position.top + position.height > this.markSetting.y
                    ) {
                        this.show = true;
                    };
                }, 1500);
                this.$store.dispatch('Tree/setMoveActiveObject', this.folderValue);
                this.$store.dispatch('Tree/setApiMoveType', 'moveIntoFolder');
            };
        },
        fileMouseout() {
            if (this.apiMoveModule) {
                this.$store.dispatch('Tree/setMoveActiveObject', null);
                this.$store.dispatch('Tree/setApiMoveType', null);
            };
        },
        init() {
            if (this.folderValue.isRoot) {
                this.active = false;
                this.show = true;
            };
            if (this.folderValue.isRoot) {
                this.$store.dispatch('ApiActive/setTree', this.$refs.treeScroll);
            };
        },
    },
};
</script>